import React,{Component} from 'react';
import axios from 'axios';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';

export default class TabDetailnews extends Component{
  constructor(props){
    super(props);
    this.state={
      lists:[]
    }
  }
  getData=()=>{
    axios({
          url   : `http://localhost:3000/news/${this.props.match.params.id}`,
         method: 'get'
        }).then(res=>{
         this.setState({
        lists:[this.state.lists,res.data]
    })
       })
  }

  componentDidMount(){
      this.getData();
    }

  render(){
    const { Meta } = Card;
    const {carousel} = this.props;


    let jsxnews=[];
    for(var i=0;i<this.state.lists.length;i++){
      if(this.state.lists[i].text !=null){
      jsxnews.push(
         <WingBlank size="lg">
         <WhiteSpace size="lg"/>
      <Card style={{'key':'this.props.match.params.id'
         }}>
      <Card.Header
        title={this.state.lists[i].text}
        thumb={this.state.lists[i].img}
        thumbStyle={{border:'1px solid black',borderRadius:'25px'
       }}

        extra={<span>{this.state.lists[
          i].id}</span>}
      />
      <Card.Body>
        <div>{this.state.lists[i].content}</div>
      </Card.Body>
    </Card>
    <WhiteSpace size="lg" />
  </WingBlank>
      ) }
    }


    return (
      <div>

        {jsxnews}
        </div>

    )}
}